<template>
  <div id="musicList" v-if="!loading">
    <div v-for="item in topList" :key="item.id">
      <!-- 把每个榜单作为数据传递过去 -->
      <MusicListView :top="item"></MusicListView>
    </div>
  </div>

  <Loading v-else></Loading>
</template>

<script>
import MusicListView from '@/views/Toplist/MusicListView.vue'
import Loading from '@/views/loading/Loading.vue'

export default {
  data () {
    return {
      // 页面正在加载
      loading: true,
      // 榜单列表
      topList: []
    }
  },
  created () {
    // 页面加载
    this.loading = true

    // 获取所有的榜单
    this.$api.getTopList().then(res => {
      // 只需要前4个榜单,其余榜单不显示
      this.topList = res.list.slice(0, 4);

      // 页面加载完成
      this.loading = false
    })
  },
  components: {
    MusicListView,
    Loading
  }
}
</script>

<style lang='less'>
#musicList {
  width: 100vw;
}
</style>
